<template>
    <div>
        <div id="mapchart" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import { getDevice } from '@/api/home/index.js';
require('echarts/theme/macarons') // echarts theme
export default {
    mounted() {

        this.getData()
    },
    methods: {
        init(data) {
            // 获取容器元素
            var chartContainer = document.getElementById('mapchart');
            // 初始化图表实例
            var chart = echarts.init(chartContainer);
            var uploadedDataURL = 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full';
            axios.get(uploadedDataURL).then(function (geoJson) {
                console.log(geoJson)
                echarts.registerMap('GD', geoJson.data);
                let option = {
                    tooltip: {
                        show: false,
                        trigger: 'item',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // title: [{
                    //     text: '地图'
                    // }],
                    // grid: {
                    //     height: '100%',
                    //     width: '100%'
                    // },
                    geo: [{
                        map: 'GD',
                        top: '8%',
                        left: '10%',
                        roam: false,
                        width: '80%',
                        height: '120%',
                        aspectScale: 0.75, //长宽比
                        zoom: 1.1,
                        scaleLimit: {
                            min: 1,
                            max: 3,
                        },
                        selected:false,
                        silent: true,
                        label: {
                            normal: {
                                fontSize: 12,
                                show: true,
                                color: '#fff'
                            },
                        },
                        emphasis: {
                            disabled: true,
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#09132c' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#274d68' // 100% 处的颜色
                                    }],
                                    globalCoord: true // 缺省为 false
                                },
                                shadowColor: 'rgba(39, 77, 104,5)',
                                shadowOffsetX: 5,
                                shadowOffsetY: 6
                            },

                        },
                    }],

                    series: [
                        {
                            type: 'map',
                            roam: false,
                            top: '8%',
                            left: '10%',
                            width: '80%',
                            height: '120%',
                            zoom: 1.1,
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: 'rgba(92, 137, 159,.8)'
                                    }
                                },

                            },
                            emphasis: {
                                disabled: true,
                            },
                            silent: true,
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgb(147, 235, 248)',
                                    borderWidth: 1,
                                    areaColor: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#09132c' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#274d68' // 100% 处的颜色
                                        }],
                                        globalCoord: true // 缺省为 false
                                    },
                                },

                            },

                            //     roam: false,
                            map: 'GD' //使用
                            // data: this.difficultData //热力图数据   不同区域 不同的底色
                        },  //地图线的动画效果
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',//坐标系统
                            data: data,
                            //地图点的样式；颜色，大小
                            symbolSize: 12,
                            itemStyle: {
                                shadowBlur: 2,
                                shadowColor: "#333"
                            },
                        },
                        //涟漪特效
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            showEffectOn: 'render',
                            zlevel: 1,
                            rippleEffect: {
                                period: 15,
                                scale: 4,
                                brushType: 'fill'
                            },
                            hoverAnimation: true,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    offset: [15, 0],
                                    color: '#1DE9B6',
                                    show: true
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: '#1DE9B6'
                                    /* function (value){ //随机颜色
                                     return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
                                     }*/
                                    ,
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            symbolSize: 12,
                            data: data
                        }, //地图线的动画效果
                    ]
                }
                chart.setOption(option)
                // // 监听鼠标点击事件，取消高亮效果
                // chart.on('click', function (params) {
                //     var selectedData = option.series[0].data[params.dataIndex];
                //     selectedData.selected = false;
                // })

            })
        },

        async getData() {

            const res = await getDevice();
            if (res.code == 200) {
                let mapData = res.data.map(item => {
                    return [item.longitude, item.latitude]
                })
                console.log(mapData, 'res.data');
                this.init(mapData)

            }

            // this.init(_data, _data1)
        }



    }
}
</script>

<style></style>